<!DOCTYPE HTML>
<html>
	<head>
		<title>nativeDroid II - jQueryMobile Template</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css" />
		<link rel="stylesheet" href="/vendor/waves/waves.min.css" />
		<link rel="stylesheet" href="/css/nativedroid2.css" />

				<style>
					/* Prevent FOUC */
					body { opacity: 0; }
				</style>

	</head>
	<body>

		<div data-role="page">

			<nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>

			<div data-role="panel" id="bottomsheetblock" class="ui-bottom-sheet" data-animate="false" data-position='bottom' data-display="overlay">
				<nd2-include data-src="/examples/fragments/bottom.sheet.html"></nd2-include>
			</div>

			<div data-role="header" data-position="fixed">
				<a href="#bottomsheetblock" class="ui-btn ui-btn-right wow fadeIn" data-wow-delay='1.2s'><i class="zmdi zmdi-more-vert"></i></a>
				<a href="#leftpanel" class="ui-btn ui-btn-left"><i class="zmdi zmdi-menu"></i></a>
				<h1>Toasts</h1>
			</div>

			<div role="main" class="ui-content" data-inset="false">

				<span class="nd2-title">Toasts</span>
				<p>
					Toasts are small notification appearing from the bottom. According to the <a href="https://www.google.com/design/spec/components/snackbars-toasts.html" target="_blank">Material Design Guidelines</a> they have no icon and at least a small message. Optional you can place one action button.
				</p>
				<p>
					In nativeDroid<sup>2</sup> you can trigger Toasts in two different ways.
				</p>
				<span class="nd2-title">Programmatically</span>
				<p>
					<pre><strong>new</strong> $.nd2Toast({ <em>// The 'new' keyword is important, otherwise you would overwrite the current toast instance</em>
   <strong>message</strong> : "Sample Message", <em>// Required</em>
   <strong>action</strong> : { <em>// Optional (Defines the action button on the right)</em>
     title : "Pick phone", <em>// Title of the action button</em>
     link : "/any/link.html", <em>// optional (either link or fn or both must be set to define an action)</em>
     fn : function() { <em>// function that will be triggered when action clicked</em>
        console.log("Action Button clicked'");
     },
     color : "red" <em>// optional color of the button (default: 'lime')</em>
   },
   <strong>ttl</strong> : 8000 <em>// optional, time-to-live in ms (default: 3000)</em>
 });</pre>
				</p>
				<span class="nd2-title">By Data Attributes</span>
				<p>
					<pre>&lt;a href="#"
   <strong>data-role="toast"</strong>
   <strong>data-toast-message</strong>="Simple toast message set by data-message"
   data-toast-action-title="Action"
   data-toast-action-link="toasts.html"
   data-toast-action-color="red"
   data-toast-ttl="6000"&gt;Link&lt;/a&gt;</pre>
				</p>

					<span class="nd2-title">Demonstration</span>
					<p>
						<a href="#"
								class="ui-btn clr-btn-accent-blue ui-btn-inline"
								data-role="toast"
								data-toast-message="Simple toast message set by data-message"
								data-toast-action-title="Action"
								data-toast-action-link="toasts.html"
								data-toast-action-color="red"
								data-toast-ttl="6000"><i class='zmdi  zmdi-play'></i> Open Toast by data attributes</a>

						<a href="#"
								class="ui-btn clr-btn-accent-green ui-btn-inline"
								data-role="toast"
								data-toast-message="I'm just text"><i class='zmdi zmdi-play'></i> Sample Toast with Text Message only</a>
					</p>


					<a  href="#"
							class="ui-btn
							ui-btn-inline
							ui-btn-fab
							ui-btn-fab-bottom
							ui-btn-raised
							clr-primary"

							data-role="toast"
							data-toast-message="Mic on"
							data-toast-action-title="Abort"
							data-toast-action-link="toasts.html"
							data-toast-action-color="yellow">
								<i class='zmdi zmdi-mic-off zmd-2x'></i>
				</a>

			</div>

		</div>

		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
		<script src="/vendor/waves/waves.min.js"></script>
		<script src="/js/nativedroid2.js"></script>
		<script src="/nd2settings.js"></script>

		<<script type="text/javascript">

			// Toast Test

				new $.nd2Toast({
					message : "Message has been deleted",
					action : {
						title : "undo",
						fn : function() {
							console.log("I am the function called by 'Pick phone...'");
						},
						color : "lime"
					},
					ttl : 3000
				});


		</script>


	</body>
</html>
